<template>
	<div>
		<p>迷你图</p>
		<spark-lines
			:spData="spData"
			:spIndicatorStyles="spIndicatorStyles"
			:spLineStyles="spLineStyles"
			:spTooltipProps="spTooltipProps"
			:spRefLineType="spRefLineType"
			:spSpotStyles="spSpotStyles"
			:spTextStyles="spTextStyles"
			:spRefLineStyles="spRefLineStyles"
			:spSpotProps="spSpotProps"
		></spark-lines>
	</div>
</template>
<script setup lang="ts" name="SparklinesIndex">
import sparkLines from '@/components/SparkLines/index.vue'
const spData = (() => {
	const len = 20
	return Array.from({ length: len }, () => Math.floor(Math.random() * len))
})()
const spIndicatorStyles = { stroke: '#000' }
const spLineStyles = { stroke: '#dc2b33', fill: '#000', strokeWidth: 2 }
// 参考线种类：'max', 'min', 'mean', 'avg', 'median', 'custom' or false
const spRefLineType = 'avg'
// 结点样式
const spSpotStyles = { fill: '#54a5ff' }
// 字体样式
const spTextStyles = {
	fill: '#d14',
	fontSize: '12'
}
// 参考线样式
const spRefLineStyles = {
	stroke: '#d14',
	strokeOpacity: 1,
	strokeDasharray: '2, 2'
}
// 结点属性
const spSpotProps = { size: 2 }
const spTooltipProps = {
	formatter(val: any) {
		return `当前数据为：<label style="color:${val.color};font-weight:bold;">${val.value}</label>`
	}
}
</script>
<style>
.container {
	padding: 20px;
}
</style>
